<script setup>
import {topUpApi} from "@/api/WalletApi.js";
import {ElMessage} from "element-plus";

defineProps({
  isShow: {
    type: Object,
    required: true,
    default: {}
  }
});

// 充值
function topUp(dona_money) {
  topUpApi(dona_money).then(resp=>{
    document.getElementById("topUp").innerHTML = resp;
    var form = document.forms['punchout_form'];
    // 跳转新页面
    form.target = "_blank";
    form.submit();
  }).catch(err=>{
    ElMessage({
      message: '充值失败！',
      type: 'warning'
    });
  });
}
</script>
<template>
  <!--充值-->
  <el-dialog class="registerDialog" title="充值" v-model="isShow.topUpDialog" align-center>
    <div class="topUpOptions" @click="topUp(6)">
      6元
      <br>
      60钻石
    </div>
    <div class="topUpOptions" @click="topUp(30)">
      30元
      <br>
      300钻石
    </div>
    <div class="topUpOptions" @click="topUp(98)">
      98元
      <br>
      980钻石
    </div>
    <div class="topUpOptions" @click="topUp(198)">
      198元
      <br>
      1980钻石
    </div>
    <div class="topUpOptions" @click="topUp(328)">
      328元
      <br>
      3280钻石
    </div>
    <div class="topUpOptions" @click="topUp(648)">
      648元
      <br>
      6480钻石
    </div>
    <div id="topUp" style="display: none;">渲染付款专用</div>
  </el-dialog>
</template>
<style scoped>
.topUpOptions {
  background-color: white;
  width: 100px;
  height: 60px;
  border: 1px #C6E2FF solid;
  border-radius: 10px;
  margin: 7px;
  float: left;
  text-align: center;
  line-height: 30px;
}
.topUpOptions:hover {
  background-color: #ECF5FF;
}
.topUpOptions:active {
  border: 1px #409EFF solid;
}
</style>
